<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .borderShow{
    width: 150px;
    height: 70px;

    position: relative;
 
    overflow: hidden;

    display: flex;
    justify-content: space-around;
    align-items: center;

    &::before,
    &::after
    {
       content: '';
       position: absolute;
       top: 2px;
       left: 2px;
       width: calc(100% - 4px - 12px);
       height: calc(100% - 4px - 12px);
       text-align: center;
       border:6px solid white;
       border-radius: 4px;
       background-color: #fff;
       animation: showRound 3s infinite linear;
    }

    &::after{
        animation: showRound 3s infinite -1.5s linear; /* insetRound动画 持续3s 无限循环 提前1.5s(负数提前,正数延迟) 匀速播放 */
    }

}
@keyframes showRound {
    /* box-shadow : x轴 y轴 模糊 放大 颜色; */
    0%,100%{
        box-shadow: 0px -66px 0px 0px #c073ed; /* 上 */
    }
    25%{
        box-shadow: 146px 0px 0px 0px #c073ed; /* 右 */
    }
    50%{
        box-shadow: 0px 66px 0px 0px #c073ed; /* 下 */
    }
    75%{
        box-shadow: -146px 0px 0px 0px #c073ed; /* 左 */
    }
}

    </style>
</head>
<body>
    <div class="borderShow">
        <!-- <div class="borderShowCenter">按钮</div> -->
   </div>
   
</body>
</html>